<template>
  <view style="width: 100%; min-height: 100vh;">
    <view style="width: 100%; padding-top:  66upx;">
      <view class="flex flex-direction" style="width: 100%; padding: 0 80upx; margin-bottom: 80upx;">
          <view class="input-box flex align-center" style="">
            <input type="number" v-model="phonenum" :disabled="!type" placeholder="请输入手机号" maxlength="11" placeholder-style="color: #DCDCDC;" style="font-size: 28upx; width: 100%;">
          </view>
          <view class="input-box flex justify-between align-center">
            <input type="number" v-model="verification_code" placeholder="请输入验证码" maxlength="6" placeholder-style="color: #DCDCDC;" style="font-size: 28upx; width: 60%;">
            <view v-show="!is_obtain" @click="handleGetVerification" style="font-size: 28upx; color: #008BCC;">获取验证码
            </view>
            <view v-show="is_obtain && count" style="font-size: 28upx; color: #999999;">
            <span @click="handleReGetTime">
              <span>{{ count }}</span>
              <span>s后重试</span>
            </span>
            </view>
          </view>
          <view class="input-box flex align-center" style="">
            <input type="password" v-model="new_password" placeholder="请输入新密码" placeholder-style="color: #DCDCDC;" style="font-size: 28upx; width: 100%;">
          </view>
        <view v-if="test_new_password" style="font-size: 20upx; color: #E52718;">密码由数字和字母组成且不小于6位数</view>
		  <view class="input-box flex align-center" style="">
		    <input type="password" v-model="confirm_password" placeholder="请确认新密码" placeholder-style="color: #DCDCDC;" style="font-size: 28upx; width: 100%;">
		  </view>
        <view v-if="test_confirm_password" style="font-size: 20upx; color: #E52718;">密码由数字和字母组成且不小于6位数</view>
      </view>
      <view class="flex flex-direction align-center">
        <view @click="handleToChangePassword()" class="flex align-center justify-center"
              style="width: 596upx; height: 80upx; margin-bottom: 30upx; background-color: #E52718; color: white; font-size: 28upx; border-radius: 40upx;">
          完成
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import {accountUser_editPassword, accountUser_forgetPassword, vertify_sendVertifyCode} from "api/login/login";

export default {
  data() {
    return {
      phonenum: '', //手机号
      verification_code: '', //验证码
      is_obtain: false, //是否获取验证码
      count: 60, //倒计时
      timer: '', //定时器
      time: '', //定时器
      new_password: '', //密码
      confirm_password: '', //确认密码
      radio: false, //选择协议
      type: '', //忘记密码：1、修改密码
      test_new_password: false, //校验新密码
      test_confirm_password: false, //校验新密码
    }
  },
  methods: {
    //获取验证码
    handleGetVerification() {
      if (!this.phonenum) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return;
      }
      this.is_obtain = true;
      this.count = 60;
      this.countDown()
      vertify_sendVertifyCode({phonenum: this.phonenum}).then(res=>{
        uni.showToast({
          title: '发送成功!',
          icon: 'none'
        })
      }).catch(err=>{
        this.is_obtain = false;
        clearInterval(this.timer);
        clearTimeout(this.time);
        uni.showToast({
          title: err.msg,
          icon: 'none'
        })
      })
    },
    //定时器
    countDown() {
      this.time = setTimeout(() => {
        if (this.count > 0) {
          this.count--;
          this.countDown()
        } else {
          this.is_obtain = false;
          clearInterval(this.timer);
          clearTimeout(this.time);
        }
      }, 1000)
    },
    //重新计时
    handleReGetTime() {
      if (!this.count) {
        this.count = 60;
        this.handleGetVerification();
      }
    },
    //注册
    handleToChangePassword(){
      const validateToast = (vm, rules) => {
        return new Promise((resolve, reject) => {
          Object.keys(rules).forEach((key) => {
            const segments = key.split('.')
            const item = rules[key]
            item.forEach((ruleItem) => {
              const value = segments.reduce((total, item) => total && total[item], vm)
              // 必填
              if (ruleItem.required && !value) {
                reject(ruleItem.message)
              }
              // 正则
              if (ruleItem.pattern && !ruleItem.pattern.test(value)) {
                reject(ruleItem.message)
              }
            })
          })
          resolve(true)
        })
      }
      const validate_val_obj = {
        phonenum: this.phonenum,
        captcha_code: this.verification_code,
        new_password: this.new_password,
        confirm_password: this.confirm_password,
      }
      const rules = {
        phonenum: [
          {required: true, message: '请输入手机号'},
          { pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误' } // 正则校验
        ],
        captcha_code: [
          {required: true, message: '请输入验证码'}
        ],
        new_password: [
          {required: true, message: '请输入新密码'},
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/}
        ],
        confirm_password: [
          {required: true, message: '请输入确认密码'},
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/}
        ],
      }
      this.test_new_password = !(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/.test(this.new_password));
      this.test_confirm_password = !(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]/.test(this.confirm_password));
      if(this.test_new_password || this.test_confirm_password){
        return;
      }
      if(this.type){
        validateToast(validate_val_obj, rules).then(valid =>{
          accountUser_forgetPassword(validate_val_obj).then(res=>{
            uni.showToast({
              title: '修改密码成功',
              duration: 2000,
              icon: 'none',
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              });
            }, 500)
          }).catch(err=>{
            uni.showToast({
              title: err.msg,
              duration: 2000,
              icon: 'none',
            });
          })
        }).catch(err=>{
          uni.showToast({
            icon: 'none',
            title: err,
          })
        })
      }else {
        validateToast(validate_val_obj, rules).then(valid =>{
          accountUser_editPassword(validate_val_obj).then(res=>{
            uni.showToast({
              title: '修改密码成功',
              duration: 2000,
              icon: 'none',
            });
            uni.removeStorageSync('user_info');
            setTimeout(() => {
              uni.redirectTo({
                url: '/pages/login/login'
              });
            }, 500)
          }).catch(err=>{
            uni.showToast({
              title: err.msg,
              duration: 2000,
              icon: 'none',
            });
          })
        }).catch(err=>{
          if (err){
            uni.showToast({
              icon: 'none',
              title: err,
            })
          }
        })
      }
    },
  },
  onLoad(e){
    this.type = e.type;
    let user_info =  uni.getStorageSync('user_info');
    this.phonenum = user_info.phonenum;
    if(e.type){
      uni.setNavigationBarTitle({
        title: '忘记密码'
      });
    }
  },
  destroyed() {
    console.log('禁止定时器')
    clearInterval(this.timer);
    clearTimeout(this.time);
  }
}
</script>
<style lang="less" scoped>
/deep/ uni-radio .uni-radio-input {
  width: 34upx;
  height: 34upx;
  border: 2upx solid #000000;
  background-color: #ffffff !important;
}
/deep/ uni-radio:not([disabled]) .uni-radio-input:hover{
  background-color: #000000;
  border-color: #000000 !important;
}
/deep/ uni-radio .uni-radio-input::after {
  background-color: #000000 !important;
  border: 6upx solid #ffffff !important;
  left: -1 !important;
}
.input-box {
	width: 100%; height: 118upx;padding: 58upx 0 20upx 0; border-bottom: 2upx solid #F5F5F5;
}
</style>
